<template>
  <div class="apply">
    <div class="padding-lr20">
      <div class="header bg-ff margin-b20">
        <div class="header_t flex justify-between border-bottom text-center">
          <div class="c-99">申请时间</div>
          <div class="input" @click="show=true">{{start}}</div>
          <span>--</span>
          <div class="input" @click="shows=true">{{end}}</div>
        </div>
        <div class="sure margin-t40 text-center bg-ff0 text-ff" @click="getData(1)">查询</div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="bg-ff">
      <div
        class="record_li flex padding-20 align-center"
        v-for="(item,index) in list"
        :key="index"
        @click="apply(item.record_id, index)"
      >
        <div class="position-relative margin-r24">
          <img class="radius-50p" :src="item.head_img?item.head_img:$nologin" alt />
          <div
            :class="['Unread line-40', item.is_read==1?'':'b-336600']"
          >{{item.is_read==1?'未查看':'已查看'}}</div>
        </div>
        <div class="flex-grow flex flex-column text-content">
          <div
            class="rem-30px overflow-hidden text-cut-one"
          >{{item.user_name}}&emsp;{{item.user_phone}}提交了申请</div>
          <div class="rem-24px overflow-hidden">
            <span class="c-99">{{item.created_at}}</span>
          </div>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>

    <load @loadData="getData" :list="list" :total="total" :nodata="list.length<10?true:false"></load>

    <!-- 时间浮层 -->
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="sure"
        @cancel="show = false"
      />
    </van-popup>
    <van-popup v-model="shows" position="bottom">
      <van-datetime-picker
        v-model="currentDates"
        type="date"
        title="选择年月日"
        :min-date="minDates"
        :max-date="maxDates"
        @confirm="sures"
        @cancel="shows = false"
      />
    </van-popup>

    <!-- 浮层 -->
    <van-popup class="padding-lr40 padding-tb20" v-model="applyShow">
      <div class="popup border-bottom rem-32px line-height-100 text-center margin-b20">
        <div class="position-relative">
          查看详情
          <van-icon name="cross" @click="applyShow=false" />
        </div>
      </div>
      <div class="rem-32px line-70">
        <div>姓名：{{applyUser.user_name}}</div>
        <div>电话：{{applyUser.user_phone}}</div>
        <div>公司：{{applyUser.apply_company}}</div>
        <div>职位：{{applyUser.position_name}}</div>
      </div>
      <div
        class="popup_btn line-height-100 radius-15 text-bold rem-34px text-center bg-ff0 text-ff"
        @click="getCall"
        v-if="applyUser.seen == 2"
      >获取联系方式</div>
      <div
        class="popup_btn line-height-100 radius-15 text-bold rem-34px text-center bg-ff0 text-ff"
        v-if="applyUser.seen == 1"
      >
        <a :href="'tel:' + applyUser.user_phone">拨打电话</a>
      </div>
      <div class="c-99 tip text-center">
        当前剩余查看次数:
        <span style="color: red">{{applyUser.zs_num}}次</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import load from "../components/load";
export default {
  components: {
    load
  },
  data() {
    return {
      list: [],
      total: 0,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2300, 12, 31),
      minDates: new Date(1900, 1, 1),
      maxDates: new Date(2300, 12, 31),
      start: "",
      end: "",
      currentDate: new Date(),
      currentDates: new Date(),
      show: false,
      shows: false,
      indexss: "",
      applyShow: false,
      applyUser: "", // 弹出框的个人信息
      getCall_id: "", // 使用次数要传的id
      ping: false // 点击事件限制
    };
  },
  mounted() {
    this.addDate();
    this.getData(1, true);
  },
  methods: {
    addDate() {
      let date = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate()
      };
      this.start = date.year + "-" + date.month + "-" + date.date;
      this.end = date.year + "-" + date.month + "-" + date.date;
    },
    getData(page, type) {
      this.$axios
        .post("/home/record/list", {
          token: window.localStorage.getItem("qx_token"),
          page: page,
          limit: 10,
          start_time: type ? "" : this.start,
          end_time: type ? "" : this.end + " 23:59"
        })
        .then(res => {
          if (page == 1) {
            this.list = [];
            this.topList = [];
          }
          if (res.data.data.data.length == 0) {
            this.total++;
            return false;
          }
          for (let i in res.data.data.data) {
            this.list.push(res.data.data.data[i]);
          }
        });
    },
    to(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    sure(e) {
      this.start =
        e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      this.show = false;
    },
    sures(e) {
      this.end = e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      this.shows = false;
    },
    apply(id, index) {
      this.indexss = index;
      this.getCall_id = id;
      this.applyUser = ""
      this.$axios
        .post("/home/record/userInfo", {
          token: window.localStorage.getItem("qx_token"),
          record_id: id
        })
        .then(res => {
          this.applyUser = res.data.data;
          this.applyShow = true;
        });
    },
    getCall() {
      if (this.ping) {
        return false;
      }
      this.ping = true;
      this.$axios
        .post("/home/record/getInfo", {
          token: window.localStorage.getItem("qx_token"),
          record_id: this.getCall_id
        })
        .then(res => {
          this.$toast(res.data.msg);
          this.ping = false;
          if (res.data.code == 0) {
            this.list[this.indexss].is_read = 2;
            this.indexss = "";
            this.applyUser.user_name = res.data.data.user_name;
            this.applyUser.user_phone = res.data.data.user_phone;
            this.applyUser.apply_company = res.data.data.apply_company;
            this.applyUser.seen = 1;
            this.applyUser.zs_num = Number(this.applyUser.zs_num) - 1;
          }
        });
    }
  }
};
</script>

<style scoped>
.cover_img {
  width: 2.26rem;
  height: 1.72rem;
  display: block;
}
/* 未读 */
.Unread {
  position: absolute;
  right: -8px;
  top: -4px;
  padding: 1px 3px;
  border-radius: 8%;
  background: #ff0000;
  font-size: 10px;
  color: white;
}
.apply .b-336600 {
  background-color: #336600;
}
/*  */
.header {
  padding: 0 0.14rem 0.4rem;
  border-radius: 0.15rem;
  margin-top: 0.2rem;
}
.header_t {
  height: 1rem;
  line-height: 1rem;
}
.header_t .input {
  width: 2.04rem;
  text-align: center;
}
.header_c {
  height: 1rem;
  line-height: 1rem;
}
.van-icon-arrow {
  color: #999;
}
/*  */
.border-bottom:last-of-type {
  border: none;
}

/*  */
.record_li img {
  width: 0.96rem;
  height: 0.96rem;
}
.btn {
  height: 0.9rem;
  line-height: 0.9rem;
  width: 100%;
  border-radius: 0.15rem;
  margin-top: 0.4rem;
}
/* 浮层 */
.popup {
  width: 5.8rem;
}
.van-icon-cross {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.popup_btn {
  width: 2.8rem;
  margin: 0.5rem auto;
}
.tip {
  font-size: 0.22rem;
}
</style>

<style>
/* popup-2002层级比toast-1000高 */
.apply .van-overlay {
  z-index: 200 !important;
}
.apply .van-popup--center {
  z-index: 300 !important;
}
</style>